<template>
  <span :class="uploadClass">
    <el-upload
      ref="upload"
      class=""
      v-model:file-list="fileList"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      action="#"
      :limit="1"
      :disabled="disabled || onlyShow"
      :on-exceed="handleExceed"
      :auto-upload="false"
      :show-file-list="showFileFlag"
      :http-request="uploadFile"
      :on-change="changeFn"
      :before-upload="beforeAvatarUpload"
    >
      <template #trigger v-if="!onlyShow">
        <el-button type="primary" :disabled="disabled">{{
          props.btnName
        }}</el-button>
      </template>
    </el-upload>
  </span>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { genFileId } from "element-plus";
import type {
  UploadInstance,
  UploadProps,
  UploadRawFile,
  UploadUserFile,
} from "element-plus";

const props = defineProps({
  url: {
    type: String,
    required: false,
  },
  name: {
    type: String,
    required: false,
  },
  showFileFlag: {
    type: Boolean,
    required: false,
    default: true,
  },
  btnName: {
    type: String,
    required: false,
    default: "上传",
  },
  fileType: {
    type: String,
    required: false,
    default: "image",
  },
  disabled: {
    type: [Boolean],
    required: true,
    default: false,
  },
  onlyShow: {
    type: [Boolean],
    required: true,
    default: false,
  },
});
const emit = defineEmits(["setFile", "deleteFile"]);
const upload = ref<UploadInstance>();

const fileList = ref<UploadUserFile[]>([]);

const uploadClass = computed(() => {
  return props.onlyShow ? "upload-demo onlyShowClass" : "upload-demo";
});

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  console.log("11111111111", rawFile.type, rawFile.type.indexOf("image"));
  if (props.fileType === "image") {
    if (rawFile.type.indexOf(props.fileType) === -1) {
      ElMessage.error("请上传图片格式的文件!");
      return false;
    } else if (rawFile.size / 1024 / 1024 > 5) {
      ElMessage.error("图片大小不能超过5MB!");
      return false;
    }
  } else if (props.fileType === "xlsx") {
    if (
      rawFile.type !==
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    ) {
      ElMessage.error("请上传xlsx格式的文件!");
      return false;
    } else if (rawFile.size / 1024 / 1024 > 30) {
      ElMessage.error("图片大小不能超过30MB!");
      return false;
    }
  }

  return true;
};

const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile, "ddd", uploadFile.url);
  window.open(uploadFile.url);
};

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
  emit("deleteFile");
};

const handleExceed: UploadProps["onExceed"] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};
/**
 * 自定义图片上传
 *
 * @param options
 */
async function uploadFile(options: any): Promise<any> {
  console.log("dddddddddddddddd", options.file);
  emit("setFile", options.file);
}

function changeFn(data: any) {
  console.log("ccccccccccccccc", data, data.file);
  submitUpload();
}

const submitUpload = () => {
  upload.value!.submit();
};

onMounted(() => {
  if (props.url) {
    fileList.value = [
      {
        name: props.name || "",
        url: props.url,
      },
    ];
  }
});
</script>

<style lang="scss" scoped>
.onlyShowClass {
  :deep(.el-upload--text),
  :deep(.el-upload-list__item-status-label),
  :deep(.el-icon--close) {
    display: none;
  }
  :deep(.el-upload-list) {
    margin: 0;
  }
}
</style>
